<template>
    <div class="icons">
        <div class="icon-list" v-for="item of iconList" :key="item.id">
            <img class="icon-img" :src="item.IconUrl" />
            <p class="icon-title">{{item.IconTitle}}</p>
        </div>
    </div>
</template>
<script>
export default {
    name:'HomeIcons',
    props:{
        iconList:Array
    },
    data(){
        return{
            
        }
    }
}
</script>
<style lang="stylus" scoped>
    .icons
        overflow :hidden
        height:0
        padding-bottom:30%
        .icon-list
            width :20%
            float :left
            overflow :hidden
            height:15%
            position :relative
            padding-bottom:15%
            .icon-img
                width:.44rem
                height:.44rem
                display:block
                margin:.2rem auto .15rem
            .icon-title
                color :#333
                font-size :.1rem
                text-align :center
                overflow :hidden
                white-space :nowrap
                text-overflow :ellipsis
</style>
